function BoundsWidget(map, callback) {
  this.callback = callback;
  this.map = map;
  this.rectangle = new google.maps.Rectangle({
    map: map,
    strokeWeight: 3,
    strokeColor: '#ff0000',
    strokeOpacity: .5,
    fillOpacity: 0,
    clickable: false
  });
  this.swAnchor = new google.maps.Marker({
    position: this.sw,
    draggable: true,
    raiseOnDrag: false,
    icon: BoundsWidget.icon,
    map: map
  });
  this.neAnchor = new google.maps.Marker({
    position: this.ne,
    draggable: true,
    raiseOnDrag: false,
    icon: BoundsWidget.icon,
    map: map
  });
  this.setBoundsToMap();
  var that = this;
  this.swAnchor.position_changed = function() {
    that.sw = this.getPosition();
    that.onChange.call(that);
  };
  this.neAnchor.position_changed = function() {
    that.ne = this.getPosition();
    that.onChange.call(that);
  };
}

BoundsWidget.prototype.setBounds = function(bounds) {
  this.sw = bounds.getSouthWest();
  this.ne = bounds.getNorthEast();
  this.swAnchor.setPosition(this.sw);
  this.neAnchor.setPosition(this.ne);
  this.onChange();
};

BoundsWidget.prototype.setBoundsToMap = function() {
  this.setBounds(this.map.getBounds());
};

BoundsWidget.prototype.setVisible = function(visible) {
  this.rectangle.setMap(visible ? this.map : null);
  this.neAnchor.setMap(visible ? this.map : null);
  this.swAnchor.setMap(visible ? this.map : null);
};

BoundsWidget.prototype.onChange = function() {
  var bounds = new google.maps.LatLngBounds(this.sw, this.ne);
  this.rectangle.setBounds(bounds);
  this.callback.call(this, bounds);
};

BoundsWidget.icon = new google.maps.MarkerImage(
    'http://upload.wikimedia.org/wikipedia/commons/2/2a/Dot.png',
    null, null, new google.maps.Point(5, 5));
